<template>
    <div class="content">
        <div class="top">
            <ul>
                <li>
                    <SelectIpt :lists="dataFormIpt" ref="dataForm">
                        <p>数据来源</p>
                    </SelectIpt>
                </li>
                <li>
                    <SelectIpt :lists="manufacturersIpt" ref="manufacturers">
                        <p>厂商</p>
                    </SelectIpt>
                </li>

                <li class="dateIpt">
                    <p>起止日期</p>
                    <el-date-picker v-model="dateValue" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </li>
                <li>
                    <TextIpt ref="txtIpt" :txt="'姓名/身份证'">
                        <p>输入</p>
                    </TextIpt>
                </li>
                <li>
                    <GreenBtn @click.native="query">查询</GreenBtn>
                </li>
            </ul>
        </div>
        <div class="table">
            <el-table :data="filterRecords.slice(pages, pages + 10)" border style="width: 100%">
                <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop"
                    :label="column.label" :width="column.width || null">
                </el-table-column>
                <el-table-column label="图片">
                    <template slot-scope="scope">
                        <!-- <img :src="scope.row.Image" alt="">
                        <el-image src="https://cdn7.axureshop.com/demo2024/2178128/images/%E5%87%BA%E5%85%A5%E8%AE%B0%E5%BD%95/p_u15431.svg" :preview-src-list="[scope.row.Image]" >
                        </el-image> -->
                        <p class="look" @click="lookImg(scope.row)">点击查看</p>
                    </template>

                </el-table-column>
            </el-table>
            <div class="page">
                <div class="total-page">
                    <p>共<span>{{ Math.ceil(filterRecords.length / 10) }}</span>页/<span>{{ filterRecords.length
                            }}</span>条数据
                    </p>
                </div>
                <el-pagination background layout="prev, pager, next,jumper" @current-change="getPage" :page-size=10
                    :current-page.sync=page :total="filterRecords.length" hide-on-single-page>
                </el-pagination>
            </div>
        </div>
        <!-- 图片对比对话框 -->
        <el-dialog title="图片对比" :visible.sync="dialogVisible" width="30%">
            <div class="dialogContent">
                <div class="dialog-left">
                    <img :src="nowImage" alt="" class="nowImg">
                    <p>识别照片</p>
                </div>
                <div class="dialog-middle">
                    <p>VS</p>
                    <p>{{ result }}</p>
                </div>
                <div class="dialog-right">
                    <img :src="negative" class="lastImg" alt="">
                    <p>底库照片</p>
                </div>
            </div>
        </el-dialog>
    </div>

</template>

<script>
import SelectIpt from '@/components/SelectIpt.vue';
import TextIpt from '@/components/TextIpt.vue';
import GreenBtn from '@/components/GreenBtn.vue';
export default {
    components: {
        SelectIpt,
        TextIpt,
        GreenBtn
    },
    methods: {
        query() {
            this.pages = 0
            this.page = 0
            const serach = {}
            if (this.$refs.dataForm.value) {
                serach.dataForm = this.$refs.dataForm.value
            }
            if (this.$refs.manufacturers.value) {
                serach.manufacturers = this.$refs.manufacturers.value
            }
            if (this.$refs.txtIpt.input) {
                serach.txtIpt = this.$refs.txtIpt.input
            }
            if (this.dateValue) {
                serach.beginDate = new Date(this.dateValue[0]).getTime()
                serach.endDate = new Date(this.dateValue[1]).getTime()

            }
            this.filterRecords = this.allRecords.filter(item => {

                if (serach.dataForm && item.Source !== serach.dataForm) {
                    return false; // 如果不匹配，则排除该房间
                }

                if (serach.manufacturers && item.Manufacturer !== serach.manufacturers) {
                    return false; // 如果不匹配，则排除该房间
                }

                if (serach.txtIpt) {
                    // 判断输入是否是姓名（2到20个中文字符）
                    const isName = /^[\u4e00-\u9fa5]{2,20}$/.test(serach.txtIpt);

                    if (isName) {
                        // 如果是姓名，检查 item.Owner 是否匹配
                        if (item.Owner !== serach.txtIpt) {
                            return false; // 姓名不匹配，排除该房间
                        }
                    } else {
                        // 如果不是姓名，认为是身份证号，检查 item.CardNum 是否匹配
                        if (item.CardNum !== serach.txtIpt) {
                            return false; // 身份证号不匹配，排除该房间
                        }
                    }
                }

                if (serach.beginDate || serach.endDate) {
                    const itemTime = new Date(item.Time).getTime(); // 将 item.Time 转化为时间戳
                    // 如果有开始时间，检查 itemTime 是否大于或等于开始时间
                    if (serach.beginDate && itemTime < serach.beginDate) {
                        return false; // 如果早于开始时间，则排除该房间
                    }
                    // 如果有结束时间，检查 itemTime 是否小于或等于结束时间
                    if (serach.endDate && itemTime > serach.endDate) {
                        return false; // 如果晚于结束时间，则排除该房间
                    }
                }
                return true;

            })

        },
        //get 当前页
        getPage(page) {
            this.pages = 10 * (page - 1)
        },
        //点击查看
        lookImg(row) {
            this.result = '对比中...'
            this.negative = ''
            this.nowImage = ''
            this.dialogVisible = true,
            this.negative = row.Negative
            this.nowImage = row.NowImage
            if (row.Negative == '' || row.NowImage == ''|| row.Negative ==null) {
                this.result = '照片缺失'
                return
            }
            this.$axios.post('http://127.0.0.1/access/faceRecognition', {
                negative: row.Negative,
                nowImage: row.NowImage
            },
                {
                    headers: {
                        'Authorization': `Bearer ${localStorage.getItem('token')}`,
                        'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                    }
                }).then(res => {
                    console.log(res.data.result.score);
                    if (res.data.error_msg == 'SUCCESS') {
                        this.result = res.data.result.score.toFixed(2) + '%'
                    } else {
                        this.result = '照片有误'
                    }
                }).catch(err => {
                    console.log(err);

                })


        }
    },
    data() {
        return {
            //对比结果
            result: '对比中...',
            //选择框
            dataFormIpt: ['人脸门禁', 'SIM卡', 'IC卡', '密码开门', '身份证开门', '远程开门'],
            manufacturersIpt: ['海康', '大华'],

            page: 0,
            pages: 0,
            //对话框里的两个图片
            negative: '',
            nowImage: '',
            dialogVisible: false,
            //数据库返回的所有数据
            allRecords: [],
            filterRecords: [],
            //表格表头
            tableColumns: [
                { prop: 'Owner', label: '姓名', width: 150 },
                { prop: 'Phone', label: '手机号', width: 200 },
                { prop: 'CardNum', label: '身份证', width: 230 },
                { prop: 'Manufacturer', label: '厂商', width: 150 },
                { prop: 'Location', label: '设备位置', width: 150 },
                { prop: 'LocationName', label: '设备名称', width: 140 },
                { prop: 'Source', label: '数据来源', width: 170 },
                { prop: 'Time', label: '时间', width: 200 },
                { prop: 'Type', label: '出入类型', width: 100 }

            ],
            dateValue: '',

        }
    },
    mounted() {

        this.$axios.get('http://127.0.0.1/access/entryExit', {
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('token')}`,
                'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
            }
        }).then(res => {
            this.allRecords = res.data;
            this.filterRecords = res.data
        }).catch(err => {
            console.log(err);
        })
    }
}
</script>

<style scoped>
.el-date-editor--daterange.el-input__inner {
    width: 285px;
}

.table>>>.el-table {
    min-height: 530px;
}

.page {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-top: 20px;
}

.page>>>button {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    background: #fff !important;
}

.page>>>.active {
    border-color: rgba(26, 135, 254, 1) !important;
    background-color: rgba(26, 135, 254, 1) !important;
    color: #fff !important;
}

.page>>>.el-pager li {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    font-size: 12px;
    color: #999;
    font-weight: normal !important;
    background: #fff;
}

.total-page span {
    color: #FF3C2C;
}

.total-page {
    font-size: 12px;
    color: #666;
}

.nowImg,
.lastImg {
    width: 200px;
    height: 200px;
    object-fit: cover;
    margin-bottom: 10px;
}

.top li {
    margin-bottom: 20px;
}

.dialogContent {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    justify-content: center;
    color: #666;
    font-size: 16px;
}

.dialog-left,
.dialog-right {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.dialogContent .dialog-middle {
    background-color: #3399ff;
    border-radius: 5px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    flex-direction: column;
    font-size: 14px;
    color: #fff;
    margin: 0 8px;
}

.look {
    color: #3399ff;
    cursor: pointer;
    user-select: none;
}

.top ul {
    display: flex;
    flex-wrap: wrap;
}

.top li {
    display: flex;
    align-items: center;
    margin-right: 50px;
}

.top>>>.el-date-editor .el-range__icon,
.top>>>.el-date-editor .el-range__close-icon {
    line-height: 23px;
}

.top>>>.el-date-editor .el-range-separator {
    line-height: 23px;
    padding: 0;

}

.top>>>.el-date-editor {
    height: 30px;
    margin-left: 20px;
}

.top {
    white-space: nowrap;
    font-size: 13px;
    color: #666;
    background: #fff;
    padding: 20px 35px;
    border-radius: 4px;
}
</style>